<template>
	<view>
		<image :src="lun[0].image" style="width: 100%;"></image>
		<view class="u-flex " style="width: 100%;padding: 30rpx;">
			<view v-for="(item,index) in fen" @click="shou(item.name)" :style="{'backgroundColor':list[index]}"
				style="width: 25%;border: 1px solid #CCCCCC;" class="u-text-center u-padding-10">
				<view>{{item.name}}</view>
			</view>
		</view>
		<uni-group v-for="(item,index) in fen" :title="item.name+'（常见关键词）'">
			<view class="item-container">
				<view class="thumb-box u-text-center u-border" v-for="(item1, index1) in fen2[index]" :key="index1" @click="dianji(item.name,item1.name)">
					<view class="item-menu-name">{{item1.name}}</view>
				</view>
			</view>
		</uni-group>
	</view>
</template>

<script>
	import api from 'commer/apiURL.js'
	export default {
		data() {
			return {
				base: api.baseurl,
				lun: [],
				fen: [],
				fen2:[],
				list: ['#fcff23', '#0eff0e', '#52a6ff', '#ff0000'],

			}
		},
		onLoad() {
			this.getlun()
			this.getlun2()
		},
		methods: {
			dianji(name,name2){
				uni.navigateTo({
					url:'xianqqq2?name='+name+'&name2='+name2
				})
			},
			shou(name) {
				uni.navigateTo({
					url: 'lajifen?name=' + name
				})
			},
			getlun2() {
				this.$get(this.base + '/prod-api/api/garbage-classification/garbage-classification/list').then((res) => {
					this.fen = res.rows
					const _this = this
					var i = 0
					getshu()
					function getshu(){
						if(i>=res.rows.length){
							return 
						}
						_this.$get(_this.base+'/prod-api/api/garbage-classification/garbage-example/list',{
							type:res.rows[i].id
						}).then((res)=>{
							let list = res.rows
							_this.$set(_this.fen2,i,list)
							i++
							getshu()
						})
					}
				})
			},
			getlun() {
				this.$get(this.base + '/prod-api/api/garbage-classification/ad-banner/list').then((res) => {
					res.data.forEach((item) => {
						this.lun.push({
							image: this.base + item.imgUrl,
							id: item.targetId
						})
					})
				})
			},
		}
	}
</script>

<style>
	.item-container {
			display: flex;
			flex-wrap: wrap;
		}
	
		.thumb-box {
			width: 25%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-top: 20rpx;
		}
	
		.item-menu-image {
			width: 120rpx;
			height: 120rpx;
		}
</style>
